import React, { useState } from 'react';
import { View, Image, Text } from '@ray-js/ray';
import { useActions, useProps } from '@ray-js/panel-sdk';
// import Popup from '@ray-js/components-ty-popup';
import { Popup, BottomSheet, DateTimePicker, Picker, Slider } from '@ray-js/smart-ui';
import Strings from '@/i18n';
import { Button } from '../Button';
import styles from './index.module.less';

export const ControlBar = () => {
  const actions = useActions();

  const props = useProps();
  const { work_mode: workMode, countdown, posing, sleeping, beep, drain } = useProps(
    props => props
  );
  console.log('countdown', countdown);

  const funclist = ['mode', 'cd', 'function'];

  const [current, setCurrent] = useState(funclist[0]);

  const [show, setShow] = useState(false);
  const [isReady, setIsReady] = useState(false);

  const toggleBottomSheet = React.useCallback(() => setShow(!show), [show]);

  const picNap = {
    auto: workMode === 'auto' ? '/images/done/auto_1.png' : '/images/done/auto.png',
    cooling: workMode === 'cooling' ? '/images/done/cool_1.png' : '/images/done/cool.png',
    ventilation: workMode === 'ventilation' ? '/images/done/wind_1.png' : '/images/done/wind.png',
  };

  const funcMap = {
    posing: `/images/done/${!posing ? 'huang' : 'huang_1'}.png`,
    sleeping: `/images/done/${!sleeping ? 'sleep' : 'sleep_1'}.png`,
    beep: `/images/done/${!beep ? 'bee' : 'bee_1'}.png`,
    drain: `/images/done/${!drain ? 'paishui' : 'paishui_1'}.png`,
  };

  const modeList = ['auto', 'cooling', 'ventilation'].map(item => ({
    key: item,
    pic: picNap[item],
    name: Strings.getLang(item),
    onClick: () => {
      actions.work_mode.set(item, { checkRepeat: false, throttle: 300 });
      toggleBottomSheet();
    },
  }));

  const functionList = ['posing', 'sleeping', 'beep', 'drain'].map(item => ({
    key: item,
    pic: funcMap[item],
    name: Strings.getLang(item),
    onClick: () => {
      actions?.[item].set(!props[item], { checkRepeat: false, throttle: 300 });
      toggleBottomSheet();
    },
  }));

  const chanegCd = value => {
    actions.countdown.set(value, { checkRepeat: false, throttle: 300 });
  };

  const renderCd = () => {
    return (
      <View className={styles.modeContainer}>
        <View className={styles.titleBox}>
          <Image
            src="/images/done/cd_b.png"
            style={{
              width: 36,
              height: 36,
              marginRight: 10,
            }}
          />
          {isReady && (
            <Text className={styles.text}>{Strings.formatValue('cd_title', `${countdown}`)}</Text>
          )}
        </View>

        <View className={styles.cdBox}>
          {isReady && (
            <Slider
              minTrackRadius="13px"
              minTrackHeight="18px"
              maxTrackRadius="13px"
              maxTrackHeight="18px"
              value={countdown}
              maxTrackColor="#D5D5D5"
              thumbBorderStyle="8rpx solid #4E93FA"
              thumbWidth={22}
              thumbHeight={22}
              max={12}
              min={0}
              enableTouch
              // onChange={value => chanegCd(value)}
              onAfterChange={value => chanegCd(value)}
              style={{
                width: `300px`,
                marginTop: '30rpx',
                zIndex: 1000,
                position: 'relative',
              }}
            />
          )}
          <View className={styles.textBox}>
            <Text className={styles.text}>{0}</Text>
            <Text className={styles.text}>{12}</Text>
          </View>
        </View>
      </View>
    );
  };

  const renderFunction = () => {
    return (
      <View className={styles.modeContainer}>
        <View className={styles.titleBox}>
          <Image
            src="/images/done/function_b.png"
            style={{
              width: 36,
              height: 36,
              marginRight: 10,
            }}
          />
          <Text>{Strings.getLang('function')}</Text>
        </View>

        <View
          className={styles.modeBox}
          style={{
            marginBottom: '40rpx',
          }}
        >
          {functionList.slice(0, 3).map(item => {
            return (
              <View className={styles.modeItemBox} key={item.key} onClick={item.onClick}>
                <Image src={item.pic} className={styles.img} />
                <Text className={styles.text}>{item.name}</Text>
              </View>
            );
          })}
        </View>

        <View className={styles.modeBox}>
          {functionList.slice(3).map(item => {
            return (
              <View className={styles.modeItemBox} key={item.key} onClick={item.onClick}>
                <Image src={item.pic} className={styles.img} />
                <Text className={styles.text}>{item.name}</Text>
              </View>
            );
          })}
        </View>
      </View>
    );
  };

  const renderMode = () => {
    return (
      <View className={styles.modeContainer}>
        <View className={styles.titleBox}>
          <Image
            src="/images/done/mode_b.png"
            style={{
              width: 36,
              height: 36,
              marginRight: 10,
            }}
          />
          <Text>{Strings.getLang('mode')}</Text>
        </View>

        <View className={styles.modeBox}>
          {modeList.map(item => {
            return (
              <View className={styles.modeItemBox} key={item.key} onClick={item.onClick}>
                <Image src={item.pic} className={styles.img} />
                <Text className={styles.text}>{item.name}</Text>
              </View>
            );
          })}
        </View>
      </View>
    );
  };

  const renderConte = {
    mode: renderMode,
    cd: renderCd,
    function: renderFunction,
  };

  return (
    <View>
      <View className={styles.container}>
        {funclist.map(item => {
          return (
            <View className={styles.buttonBox} key={item}>
              <Button
                img={`/images/done/${item}.png`}
                className={styles.btn}
                imgClassName={styles.img}
                onClick={() => {
                  setCurrent(item);
                  toggleBottomSheet();
                }}
              />
              <Text className={styles.text}>{Strings.getLang(item)}</Text>
            </View>
          );
        })}
      </View>

      <BottomSheet
        show={show}
        onClose={() => {
          toggleBottomSheet();
        }}
        onAfterEnter={() => setIsReady(true)}
        onBeforeLeave={() => setIsReady(false)}
      >
        <View
          style={{
            minHeight: '140px',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#fff',
          }}
        >
          {renderConte[current]()}
        </View>
      </BottomSheet>
    </View>
  );
};

ControlBar.height = 103;
